<template>
	<div class="line_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { Bottom } from "@element-plus/icons-vue/dist/types";
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits,toRaw } from "vue";

// 接收参数
const props = defineProps({
housingSupplyStatsData: {
type: Object,
default: () => {},
},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['barPiemagnify'])
// 字体自适应方法
const pxToRem = (px: number) => {
const scale = document.documentElement.clientWidth / 1920;
return Math.round(px * Math.min(scale, 3));
};


const getEchart = () => {
if (echartDom.value) {
myChart.value = echarts.init(echartDom.value);
const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  legend: {
					icon:'rect',
					textStyle: {
							color: "#fff",
							fontSize: pxToRem(12),
							rich: {},
							padding: [0, 0, pxToRem(-3), 0],
					},
					itemStyle: {
            borderColor: 'rgba(0,0,0,0)', // 边框颜色
            borderWidth: 2          // 边框宽度
        },
    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
  },
  series: [
    {
      name: 'Expected',
      type: 'funnel',
      left: '10%',
      width: '70%',
      label: {
        formatter: '{b}Expected'
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        opacity: 0.7
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}Expected: {c}%'
        }
      },
      data: [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
      ]
    },
    {
      name: 'Actual',
      type: 'funnel',
      left: '10%',
      width: '70%',
      maxSize: '70%',
      label: {
        position: 'inside',
        formatter: '{c}%',
        color: '#fff'
      },
      itemStyle: {
        opacity: 0.5,
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}Actual: {c}%'
        }
      },
      data: [
        { value: 30, name: 'Visit' },
        { value: 10, name: 'Inquiry' },
        { value: 5, name: 'Order' },
        { value: 50, name: 'Click' },
        { value: 80, name: 'Show' }
      ],
      z: 100
    }
  ]
};
console.log('option',option)
myChart.value.setOption(option);
myChart.value.on("click", (params) => {
	emit('barPiemagnify',props.housingSupplyStatsData)
});
}
};
const updateChart = () => {
if (myChart.value) {
myChart.value.dispose(); // 销毁旧图表实例
}
getEchart();
};

watchEffect(() => {
updateChart();
});
onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 销毁旧图表实例
}
getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
}
});
});
</script>

<style scoped lang="less">
.line_box{
	width: 100%;
	height: 100%;
}
</style>
